<template>
  <div>
       <h1>我是王思聪子组件--------父亲给的{{car}}</h1>
       <h1>我是儿子收到父亲给的钱{{money}}</h1>
       <button @click="updateCar">修改车</button>
       <button @click="updateMoney">修改钱</button>
  </div>
</template>

<script>
//组件的使用分为三步:定义、注册、使用
export default {
  name: 'MyComponent1',
  //代表props:代表子组件接受父组件传递数据
  //props第一种写法:数组的写法,数组里面书写的是自定义属性的名字【通过K获取V】
  props:["car",'money','changeAppMoney'],
  mounted () {
    //this:写项目的时候没有这种写法，虽然能获取到this._props.car
    //打印的时候你会发现一件事情:car直接作为组件实例的属性了
    //react那种写法就不在记忆了,没有这种this.props.car;没有这种写法
    console.log(this);
  },
  methods: {
    //子组件的方法修改车
    updateCar(){
       //这种写法Vue框架不允许:父亲给的props数据是只读的【只能用，不能改】
       //props数据:(只可远观而不可亵玩焉)
       //this.car = '三本子';//遵守Vue框架规则,只能使用|但是儿子不能修改
    },
    //子组件的方法修改钱
    updateMoney(){
       //当前组件MyComponent1实例自身有:两个属性 car 、money  三个方法:updateCar、updateMoney、changeAppMoney
       this.changeAppMoney();
    }
  }

}
</script>

<style scoped>
   div{
     margin: 50px 0px;
     width: 1000px;
     height: 200px;
     background: orange;
     color:blue;
   }
</style>
